﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Spinner Control</title>

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="smartspinner.js" type="text/javascript"></script>

    <link href="smartspinner.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {
            var s = $('#red').spinit({ height: 30, width: 100, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Red', callback: onred });
            $('#green').spinit({ height: 30, width: 100, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Green', callback: ongreen });
            $('#blue').spinit({ height: 30, width: 100, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Blue', callback: onblue });


            var r = 40, g = 40, b = 40;
            function onred(val) {
                r = val;
                changeColor();
            }
            function ongreen(val) {
                g = val;
                changeColor();
            }
            function onblue(val) {
                b = val;
                changeColor();
            }
            function byte2Hex(n) {
                var nybHexString = "0123456789ABCDEF";
                return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
            }
            function RGB2Color(r, g, b) {
                return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
            }

            function changeColor() {
                var color = RGB2Color(r, g, b);
                $('body').css('background-color', color);
            }

        });
    </script>

</head>
<body>
    <div style="position: relative; width: 500px; height: 100%; margin: auto;" id="canvas">
        <div style="width: 100%; height: 100px; padding-top: 50px; padding-left: 20px">
            <img src="spinner.png" alt="spinner" width="132px" height="46px" /><img src="text.png"
                alt="Html form spin control jQuery plugin" />
        </div>
        <div style="padding-left: 70px;">
            <input type="text" id="red" class="smartspinner" />
            <input type="text" id="green" class="smartspinner" />
            <input type="text" id="blue" class="smartspinner" />
        </div>
    </div>
</body>
</html>
